<template>
	<view class="center" style="background: #F5F5F5">
		<!-- <view class="header">
			<view class="arrow" @tap="$back()">
				<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">
				<text>签到轨迹</text>
			</view>
			<view class="btn f32 cfff btn-plain-primary btn-radius">
			</view>
		</view> -->
		<hea-ders title="新增签到">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
		</hea-ders>
		<!-- 地图 -->
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :latitude="latitude" :longitude="longitude" :markers="covers" >
				</map>
			</view>
		</view>
		<!-- 轨迹 -->
		<view class="track">
			<view class="track_one">
				<text>1</text>
			</view>
			<view class="track_item">
				
			</view>
			<view class="track_two" >
				<view class="track_two_item">
					<text style="font-size: 32rpx;">关联客户:</text><text class="track_text">小客户</text>
				</view>
				<text>签到时间:2020-06-03 09:41:15</text>
				<view class="track_bz">
					<text>备注:备注备注备注备注备注备注备注备注</text>
				</view>
				<view class="track_two_img">
					<image src="../../../static/images/201916541220.jpg" mode=""></image>
				</view>
				<view class="track_address">
					<text>签到位置：江苏省徐州市泉山区淮海西路27号中枢小区</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import heaDers from '@/pages/header/header.vue'
	export default {
		components:{
			heaDers
		},
		data() {
			return {
				showCenterVisible: false,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],

			};
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	.center{
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
		
				width: 22rpx;
			}
			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}
			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}
		
		.page-section map{
			width: 100%;
			height: 566rpx;
		}
		.track{
			display: flex;
			.track_one{
				background: #249AF6;
				width:45rpx;
				height:45rpx;
				border-radius:45rpx;
				color: #fff;
				text-align: center;
				line-height: 45rpx;
				font-size: 36rpx;
				margin:36rpx ;
			}
			.track_two{
				width: 514rpx;
				padding: 16rpx 32rpx;
				margin-top: 40rpx;
				background: #fff;
				box-shadow:0px 3px 10px rgba(0,0,0,0.16);
				 text{
					font-size: 24rpx;
				}
				.track_two_item{
					font-size: 32rpx;
					.track_text{
						color: #249AF6;
						font-size: 32rpx;
					}
				}
				.track_bz{
					line-height: 33rpx;
					font-size: 24rpx;
				}
				.track_address{
					line-height: 33rpx;
					font-size: 24rpx;
					color: #616161;
				}
				.track_two_img image{
					width: 120rpx;
					height: 120rpx;
					padding-top: 16rpx;
				}
			}
			.track_item{
				width: 1px;
				height: 471rpx;
				background: #BDBDBD;
				position: absolute;
				top: 55%;
				left: 58rpx;
			}
		}
		
	}
</style>
